<!--
 @description 各部门销售开单明细数据
 @fileName index.vue
 @author zengqiongying
 @created 2021/05/28 16:15:24
-->
<template>
  <div>
    <div class="data-table">
      <div class="table-head">
        <div class="td">部门</div>
        <div class="td" @click="handleSort('todayCnt')">
          今日
          <div
            class="icon-sort"
            :class="{
              asc: sortKey === 'todayCnt' && sortType === 'asc',
              desc: sortKey === 'todayCnt' && sortType === 'desc',
            }"
          />
        </div>
        <div class="td" @click="handleSort('yestodayCnt')">
          昨日
          <div
            class="icon-sort"
            :class="{
              asc:
                sortKey === 'yestodayCnt' && sortType === 'asc',
              desc:
                sortKey === 'yestodayCnt' &&
                sortType === 'desc',
            }"
          />
        </div>
        <div class="td" style="width: 33%;" @click="handleSort('threedaysCnt')">
          {{ selectType === "ship" ? "超三日未发" : "超三日未请" }}
          <div
            class="icon-sort"
            :class="{
              asc:
                sortKey === 'threedaysCnt' &&
                sortType === 'asc',
              desc:
                sortKey === 'threedaysCnt' &&
                sortType === 'desc',
            }"
          />
        </div>
      </div>
      <div class="table-body">
        <div v-for="(item, index) in tableData" :key="index" class="tr">
          <div class="td" @click="viewDetailHandle(item.onlyKey)">
            {{ item.name }}
          </div>
          <div class="td">
            {{ (item.todayCnt || "-") | filterForamtThousand }}
          </div>
          <div class="td">
            {{ (item.yestodayCnt || "-") | filterForamtThousand }}
          </div>
          <div class="td">
            {{ (item.threedaysCnt || "-") | filterForamtThousand }}
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="more" @click="handleMoreOffice">
      <template v-if="!loadover">
        查看更多办事处 <svg-icon icon-class="xiangxia" />
      </template>
      <template v-else>到底了，没有更多啦....</template>
    </div> -->
    <van-popup
      v-model="showDialog"
      round
      closeable
      class="custom-van-pop"
      style="width:90%"
    >
      <dispatch-details
        :select-type="selectType"
        :show-dialog="showDialog"
        :office-name="officeName"
      />
    </van-popup>
  </div>
</template>

<script>
import { findUninvitedCarDetails, findLeaveCarDetails } from '@/apis/logistics'
import DispatchDetails from './DispatchDetails'
export default {
  name: 'OfficeSaleOrderData',
  components: { DispatchDetails },
  props: {
    selectType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      page: 1,
      pageSize: 10,
      totalCount: 10,
      sortKey: '', // 排序字段
      sortType: '', // 排序：asc/desc
      tableHistoryData: [],
      tableOrgData: [], // 表格原数据
      tableData: [],
      showDialog: false,
      officeName: ''
    }
  },
  computed: {
    loadover() {
      return this.totalCount < this.page * this.pageSize
    }
  },
  watch: {
    selectType(val, oldVal) {
      this.sortType = ''
      this.tableData = []
      this.getOfficeData()
    }
  },
  created() {
    this.getOfficeData()
  },
  methods: {
    viewDetailHandle(onlyKey) {
      const data = this.tableHistoryData.find(
        (item) => item.onlyKey === onlyKey
      )
      if (data) {
        this.officeName = data.name
        this.showDialog = true
      }
    },
    async getOfficeData() {
      let tableOrgData = []
      if (this.selectType === 'ship') {
        await findLeaveCarDetails().then((res) => {
          // res.data = [
          //     {
          //         name: "安徽办",
          //         threedaysCnt: 7,
          //         todayCnt: 2,
          //         yestodayCnt: 5,
          //     },
          //     {
          //         name: "浙江办",
          //         threedaysCnt: 6,
          //         todayCnt: 8,
          //         yestodayCnt: 9,
          //     },
          // ];
          if (res.data && res.data.length) {
            res.data.forEach((item, index) => {
              item.onlyKey = index
            })
            this.tableHistoryData = JSON.parse(
              JSON.stringify(res.data)
            )
            tableOrgData = res.data.map((v) => {
              let name = ''
              if (v.name) {
                name = v.name
                  .replace('直营办事处', '办')
                  .replace('独资办事处', '办')
                  .replace('销售公司', '')
              }
              return {
                name,
                todayCnt: v.todayCnt || 0,
                threedaysCnt: v.threedaysCnt || 0,
                yestodayCnt: v.yestodayCnt || 0,
                onlyKey: v.onlyKey
              }
            })
          }
        })
      } else {
        await findUninvitedCarDetails().then((res) => {
          // res.data = [
          //     {
          //         name: "甘肃办",
          //         threedaysCnt: 3,
          //         todayCnt: 4,
          //         yestodayCnt: 5,
          //     },
          //     {
          //         name: "四川办",
          //         threedaysCnt: 9,
          //         todayCnt: 5,
          //         yestodayCnt: 2,
          //     },
          // ];
          if (res.data && res.data.length) {
            res.data.forEach((item, index) => {
              item.onlyKey = index
            })
            this.tableHistoryData = JSON.parse(
              JSON.stringify(res.data)
            )
            tableOrgData = res.data.map((v) => {
              let name = ''
              if (v.name) {
                name = v.name
                  .replace('直营办事处', '办')
                  .replace('独资办事处', '办')
                  .replace('销售公司', '')
              }
              return {
                name,
                todayCnt: v.todayCnt || 0,
                threedaysCnt: v.threedaysCnt || 0,
                yestodayCnt: v.yestodayCnt || 0,
                onlyKey: v.onlyKey
              }
            })
          }
        })
      }
      this.tableOrgData = tableOrgData
      this.totalCount = this.tableOrgData.length
      this.handleSort('todayCnt')
    },
    handleMoreOffice() {
      if (this.totalCount < this.page * this.pageSize) return
      this.page += 1
      this.getOfficeData()
    },
    handleSort(field) {
      if (this.sortKey === field) {
        this.sortType = this.sortType === 'desc' ? 'asc' : 'desc'
      } else {
        this.sortKey = field
        this.sortType = 'desc'
      }
      const dataList = this.tableOrgData.sort((a, b) => {
        if (this.sortType === 'desc') {
          return Number(b[field] || 0) - Number(a[field] || 0)
        } else {
          return Number(a[field] || 0) - Number(b[field] || 0)
        }
      })
      this.tableData = dataList
    }
  }
}
</script>
<style lang="less" scoped>
.data-table {
    color: #333333;
    text-align: center;
    letter-spacing: 1px;
    line-height: 20px;
    margin-bottom: 10px;
    .table-head {
        display: flex;
        align-items: center;
        height: 40px;
        background: #f5f6f7;
        border-radius: 6px;
        font-size: 14px;
    }
    .table-body {
        min-height: 37px;
        font-size: 12px;
    }
    .tr {
        display: flex;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #f5f6f7;
        > .td:nth-child(1) {
            color: #12b9a3;
        }
    }
    .td {
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 5px;
        overflow: hidden;
        &:nth-child(1) {
            width: 20%;
        }
        &:nth-child(4) {
            width: 30%;
        }
    }
    .icon-pre {
        width: 6px;
        height: 7px;
        margin-left: 5px;
    }
    .icon-sort {
        width: 12px;
        height: 14px;
        margin-left: 5px;
        background-image: url("~@/assets/image/icon_sort.png");
        background-size: 12px 14px;
        background-repeat: no-repeat;
        &.asc {
            background-image: url("~@/assets/image/icon_sort_asc.png");
        }
        &.desc {
            background-image: url("~@/assets/image/icon_sort_desc.png");
        }
    }
}
.more {
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #888888;
    font-size: 12px;
    .svg-icon {
        font-size: 16px;
    }
}
</style>
